<template>
  <div>
    <transition  enter-active-class="animate__animated animate__backInLeft">
      <router-view class="box"></router-view>
    </transition>
     <footer>
      <router-link to="/index/home" active-class="select">
        <i class="iconfont icon-biaoqiankuozhan_shangcheng-246"></i> 
        首页
      </router-link>
      <router-link to="/index/cate" active-class="select">
        <i class="iconfont icon-fenlei"></i> 
        分类
      </router-link>
      <router-link to="/index/shop" active-class="select">
        <i class="iconfont icon-gouwuche"></i>
         购物车
      </router-link>
      <router-link to="/index/mine" active-class="select">
        <i class="iconfont icon-wode"></i> 
        我的
      </router-link>
    </footer>
  </div>
</template>
<script>
export default {};
</script>

<style scoped>
.box {
  padding-bottom: 1rem;
}
 footer {
   width:100vw;
   height: 1rem;
   position: fixed;
   left:0;
   bottom:0;
   display: flex;
   background: white;
}
footer a{
  flex: 1;
  /* margin-top:30px ; */
  color: #999999;
  text-align: center;
  font-size: 20px;
}
footer a i{
  display: block;
  font-size:30px;
} 
.select {
  color: red;
  background-color: #ccc;
}
</style>